<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wasm-tools print</title>
  <script type="module" src="print.js"></script>
  <link rel="stylesheet" href="style.css">
  <style>
    .textarea-container {
      flex-grow: 1;
      padding: .4rem;
      display: grid;
      grid-column-gap: calc(.8rem + 8px);;
      grid-template-rows: min-content auto 1fr;
      grid-template-areas:
        "h"
        "a"
        "o"
    }

    button {
      font-size: inherit;
    }

    .config {
      float: right;
    }

    .description {
      grid-area: h;
    }

    .output-header {
      grid-area: a;
      padding-bottom: .4rem;
    }

    .output-container {
      grid-area: o;
      overflow-x: scroll;
    }

    #output {
      box-sizing: border-box;
      padding: .4rem;
      min-height: calc(100% - .4rem);
      width: 100%;
      margin: 0;
      border: 1px solid black;
      border-radius: 5px;
      overflow-x: scroll;
    }

    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .2);
      display: none;
      justify-content: center;
      align-items: center;
      text-shadow: 0 0 2px white;
      font-size: 24px;
      pointer-events: none;
    }

    .print-name {
      color: #9F00BD;
    }

    .print-literal {
      color: #FB0416;
    }

    .print-keyword {
      font-weight: bold;
    }

    .print-type {
      color: #328A5D;
    }

    .print-comment {
      color: #B3B3B3;
    }
  </style>
</head>

<header>
  <h1>wasm-tools print</h1>
</header>

<div id="overlay">Drop .wasm file here</div>

<div class="textarea-container">
  <div class="description">
    <p>Translate WebAssembly binaries to text format using <a href="https://github.com/bytecodealliance/wasm-tools"><code>wasm-tools print</code></a>.
    You can go the other direction using <a href="parse"><code>parse</code></a>.</p>
  </div>

  <div class="output-header">
    Drop a file on this page, or <button id="upload">manually select a file</button>.
    <input type="file" id="fileInput" accept=".wasm" style="display:none;">
    <span class="config">
      <input type="checkbox" id="skeleton">
      <label for="skeleton">Skip function bodies (recommended for large files)</label>
    </span>
  </div>
  <div class="output-container">
    <!-- adding contenteditable is the easiest way to let the user copy-paste the whole contents -->
    <pre id="output" class="iobox" contenteditable="plaintext-only" spellcheck="false"></pre>
  </div>
</div>
